<template>
  <div class="app-container">
    <div class="filter-container">
      <el-form>
        <el-form-item>
          <el-button type="success" icon="plus"  @click="showSetMySQL()" >设置数据库备份规则
          </el-button>
          <el-button type="primary" icon="plus"  @click="showBackup()" >立即备份
          </el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-table :data="list" v-loading.body="listLoading" element-loading-text="拼命加载中" border fit
              highlight-current-row>
      <el-table-column align="center" prop="Id" label="序号" >
      </el-table-column>
      <el-table-column align="center" prop="TIME" label="备份时间" >
      </el-table-column>
      <el-table-column align="center" prop="Size" label="数据大小" >
      </el-table-column>
      <el-table-column align="center" prop="useTime" label="备份用时">
      </el-table-column>
      <el-table-column align="center" prop="Sta" label="备份情况">
      </el-table-column>
      <el-table-column align="center" prop="" label="操作">
        <template slot-scope="scope">
          <el-button type="primary" icon="plus"  @click="showResume()" >立即恢复
          </el-button>
          <el-button type="danger" icon="plus"  @click="showDelete(scope.$index)" >立即删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="listQuery.pageNum"
      :page-size="listQuery.pageRow"
      :total="totalCount"
      :page-sizes="[10, 20, 50, 100]"
      layout="total, sizes, prev, pager, next, jumper">
    </el-pagination>

    <el-dialog :title="title" :visible.sync="dialogFormVisible">
      <el-form class="small-space"  label-position="left" label-width="100px">
        <el-form-item label="全量备份：">
          <el-select v-model="selected" >
            <el-option
              v-for="item in mwd"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
          <el-select v-model="day" v-if="selected === 'month'">
            <el-option
              v-for="item in 30"
              :key="item"
              :label=" item+'号' "
              :value="item">
            </el-option>
          </el-select>
          <el-select  placeholder="选择日期" v-if="selected === 'week'" v-model="weekselected">
            <el-option
              v-for="item in week"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
          <el-time-select 
            v-model="value1"
            :picker-options="{
              start: '08:30',
              step: '00:15',
              end: '18:30'
            }"
            placeholder="选择时间">
          </el-time-select>
        </el-form-item>
        <el-form-item label="增量备份：">
          <el-select v-model="selected" >
            <el-option
              v-for="item in mwd"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        <el-select v-model="day" v-if="selected === 'month'">
            <el-option
              v-for="item in 30"
              :key="item"
              :label=" item+'号' "
              :value="item">
            </el-option>
          </el-select>
        <el-select  placeholder="选择日期" v-if="selected === 'week'" v-model="weekselected">
            <el-option
              v-for="item in week"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        <el-time-select 
          v-model="value1"
          :picker-options="{
            start: '08:30',
            step: '00:15',
            end: '18:30'
          }"
          placeholder="选择时间">
        </el-time-select>          
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button  type="success"  @click="closeSetMySQL()" >确 定</el-button>
      <el-button @click="dialogFormVisible = false">取 消</el-button>
    </div>
  </el-dialog>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        mwd: [{
          value: 'month',
          label: '每月'
        }, {
          value: 'week',
          label: '每周'
        }, {
          value: 'day',
          label: '每天'
        }],
        selected:'day',
        week:[{
          value: 'week1',
          label: '星期一'
        },{
          value: 'week2',
          label: '星期二'
        },{
          value: 'week3',
          label: '星期三'
        },{
          value: 'week4',
          label: '星期四'
        },{
          value: 'week5',
          label: '星期五'
        },{
          value: 'week6',
          label: '星期六'
        },{
          value: 'week7',
          label: '星期日'
        }],
        day : 1,
        weekselected : '',
        value1: '08:30',
        tempDB: {
          Size: Math.floor(Math.random()*(500)+500)
        },
        list: [],
        totalCount: 0,
        listQuery: {
            pageNum: 1, //页码
            pageRow: 50, //每页条数
        },
        listLoading: false,//数据加载等待动画
        dialogFormVisible: false,//增加按钮弹窗能不能看到

        adminName: '管理员' ,
        title: ''
      }
    },
    created() {//钩子函数创建时调用
      this.getList();
    },
    methods: {
      // 后台读取 数据函数
      getList() {
        //查询列表
        this.listLoading = true;
        this.api({
        url: "/db/listDB",
        method: "get",
        params: this.listQuery
        }).then(data => {
        this.listLoading = false;
        this.list = data.list;
        this.totalCount = data.totalCount;
        })
      },
      handleSizeChange(val) {
          //改变每页数量
          this.listQuery.pageRow = val
          this.handleFilter();
      },
      handleCurrentChange(val) {
          //改变页码
          this.listQuery.pageNum = val
          this.getList();
      },
      handleFilter() {
          //查询事件
          this.listQuery.pageNum = 1
          this.getList()
      },
      getIndex($index) {
          //表格序号
          return (this.listQuery.pageNum - 1) * this.listQuery.pageRow + $index + 1
      },

      showSetMySQL(){
        this.dialogFormVisible = true;//显示弹窗
        this.title = '设置数据库备份规则';
      },      
      closeSetMySQL() {
        this.$message({
          message: '数据库备份规则修改成功',
          type: 'success'
        });
        this.dialogFormVisible = false;
      },

      showBackup(){
        this.$message({
          message: '正在备份,请稍后...',
          type: 'info'
        });
        this.api({
          url: "/db/addDB",
          method: "post",
          data: this.tempDB
        }).then(() => {
          this.getList();
        })
        setTimeout(()=>{
          this.$message({
            message: '备份成功',
            type: 'success'
          });
        },1000)
      },

      showResume(){
        this.$message({
          message: '正在恢复,请稍后...',
          type: 'info'
        });
        setTimeout(()=>{
          this.$message({
            message: '恢复成功',
            type: 'success'
          });
        },1000)
      },

      showDelete($index) {
        let _vue = this;
        this.$confirm('确定删除此备份信息?', '提示', {
          confirmButtonText: '确定',
          type: 'warning'
        }).then(() => {
          let db = _vue.list[$index];
          db.deleteStatus = '2';
          _vue.api({
            url: "/db/deleteDB",
            method: "post",
            data: db,
          }).then(() => {
            _vue.getList()
            _vue.$message({
              message: '删除成功',
              type: 'success'
            });
          }).catch(e => {
            _vue.$message.error("删除失败")
          })
        })
      },
        //this.dialogFormVisible = true;//显示弹窗
      closeDelete(){
        
        this.dialogFormVisible = false;
      },

      getIndex($index) {
        //表格序号
        return $index + 1
      }
    }
  }
</script>
<style scoped>
  .requiredPerm {
    color: #ff0e13;
  }
</style>
